<template>
    <div id="brand">
        <!--<tab-nav></tab-nav>-->

        <div class="www">
            <!--上部三格子-->
            <nav id="threes">
                <div class="ww nav-content">
                    <div class="nav-left">
                        <div class="mid-title">
                            <p>品牌排行榜</p>
                            <p>BRAND RANKING</p>
                            <ul class="mid-nav">
                                <li>
                                    <a href="http://www.zhouyuanwai.cn/" target="_blank">
                                        <span>1</span>
                                        <span>粥员外</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="http://www.hzwoya.com/" target="_blank">
                                        <span>2</span>
                                        <span>我呀便当</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="http://www.hzlhl.com/" target="_blank">
                                        <span>3</span>
                                        <span>厉害了炒饭</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" target="_blank">
                                        <span>4</span>
                                        <span>辣么棒</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="http://www.xiangkoufu.cn/" target="_blank">
                                        <span>4</span>
                                        <span>湘口福酸菜鱼</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="http://www.hzhbb.cn/" target="_blank">
                                        <span>5</span>
                                        <span>韩巴巴炸鸡</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-mid">
                        <div class="swiper-container" id="swiper-container1">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <a href="javascript:void(0);">
                                        <img src="./images/banner_01.jpg" alt="">
                                    </a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="javascript:void(0);">
                                        <img src="./images/banner_01.jpg" alt="">
                                    </a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="javascript:void(0);">
                                        <img src="./images/banner_01.jpg" alt="">
                                    </a>
                                </div>
                            </div>
                            <!-- 如果需要分页器 -->
                            <!--<div class="swiper-pagination"></div>-->

                            <!-- 如果需要导航按钮 -->
                            <!--<div class="swiper-button-prev swiper-button-white"></div>-->
                            <!--<div class="swiper-button-next swiper-button-white"></div>-->

                        </div>
                    </div>
                    <div class="nav-right">
                        <a href="javascript:void(0);">
                            <img src="./images/person.jpg" alt="">
                        </a>
                    </div>
                </div>
            </nav>

            <!--主体-->
            <main>
                <!--标题-->
                <div class="brand-title">

                </div>

                <!--品牌盒子-->
                <div class="brand-box">
                    <ul class="bb-nav ww">
                        <li>
                            <a href="http://www.zhouyuanwai.cn/" target="_blank"
                               :style="bg1">
                                <div class="popup">
                                    <img src="./images/pop12.png" alt="">
                                    <p>粥员外</p>
                                    <p>引爆粥类外卖新时尚</p>
                                    <p>念着你 暖着你</p>
                                    <object>
                                        <a href="javascript:void(0);">关注</a>
                                    </object>
                                </div>
                            </a>
                            <em>粥员外</em>
                        </li>
                        <li>
                            <a href="http://www.hzwoya.com/" target="_blank"
                               :style="bg2">
                                <div class="popup">
                                    <img src="./images/pop03.png" alt="">
                                    <p>我呀便当</p>
                                    <p>年轻的自由心态</p>
                                    <p>四季生意，整店输出</p>
                                    <object>
                                        <a href="javascript:void(0);">关注</a>
                                    </object>
                                </div>
                            </a>
                            <em>我呀便当</em>
                        </li>
                        <li>
                            <a href="http://www.hzlhl.com/" target="_blank"
                               :style="bg3">
                                <div class="popup">
                                    <img src="./images/pop05.png" alt="">
                                    <p>厉害了炒饭</p>
                                    <p>行业先锋品牌</p>
                                    <p>美味可口、营养均衡</p>
                                    <object>
                                        <a href="javascript:void(0);">关注</a>
                                    </object>
                                </div>
                            </a>
                            <em>厉害了炒饭</em>
                        </li>

                        <li>
                            <a href="http://www.lmbmlt.com/" target="_blank"
                               :style="bg4">
                                <div class="popup">
                                    <img src="./images/pop02.png" alt="">
                                    <p>辣么棒麻辣烫</p>
                                    <p>行业先锋品牌</p>
                                    <p>四季生意，整店输出</p>
                                    <object>
                                        <a href="javascript:void(0);">关注</a>
                                    </object>
                                </div>
                            </a>
                            <em>辣么棒麻辣烫</em>
                        </li>
                        <li>
                            <a href="http://www.xiangkoufu.cn/" target="_blank"
                               :style="bg5">
                                <div class="popup">
                                    <img src="./images/pop06.png" alt="">
                                    <p>湘口福酸菜鱼</p>
                                    <p>正宗的湘西酸菜鱼</p>
                                    <p>湘丁人最独特的味觉名片</p>
                                    <object>
                                        <a href="javascript:void(0);">关注</a>
                                    </object>
                                </div>
                            </a>
                            <em>湘口福酸菜鱼</em>
                        </li>
                        <li>
                            <a href="http://www.hzhbb.cn/" target="_blank"
                               :style="bg6">
                                <div class="popup">
                                    <img src="./images/pop04.png" alt="">
                                    <p>韩巴巴炸鸡</p>
                                    <p>行业先锋品牌</p>
                                    <p>飘洋过海来喂你</p>
                                    <object>
                                        <a href="javascript:void(0);">关注</a>
                                    </object>
                                </div>
                            </a>
                            <em>韩巴巴炸鸡</em>
                        </li>
                        <li>
                            <a href="http://www.baobaiwei.cn/" target="_blank"
                               :style="bg7">
                                <div class="popup">
                                    <img src="./images/pop07.png" alt="">
                                    <p>煲百味</p>
                                    <p>行业先锋品牌</p>
                                    <p>荤素均衡、营养美味</p>
                                    <object>
                                        <a href="javascript:void(0);">关注</a>
                                    </object>
                                </div>
                            </a>
                            <em>煲百味煲仔饭</em>
                        </li>


                        <li>
                            <a href="http://www.youwei666.com/" target="_blank"
                               :style="bg8">
                                <div class="popup">
                                    <img src="./images/pop10.png" alt="">
                                    <p>有味少年</p>
                                    <p>行业先锋品牌</p>
                                    <p>四季生意，整店输出</p>
                                    <object>
                                        <a href="javascript:void(0);">关注</a>
                                    </object>
                                </div>
                            </a>
                            <em>有味少年便当</em>
                        </li>

                        <li>
                            <a href="javascript:void(0);" target="_blank"
                               :style="bg9">
                                <div class="popup">
                                    <img src="./images/pop11.png" alt="">
                                    <p>暖小稻</p>
                                    <p>暖小稻 现炒现煮</p>
                                    <p>2019外卖潜力王</p>
                                    <object>
                                        <a href="javascript:void(0);">关注</a>
                                    </object>
                                </div>
                            </a>
                            <em>黄焖鸡+锅贴</em>
                        </li>
                        <li>
                            <a href="javascript:void(0);" target="_blank"
                               :style="bg10">
                                <div class="popup">
                                    <img src="./images/pop01.png" alt="">
                                    <p>蜀帅麻辣香锅</p>
                                    <p>川渝风味</p>
                                    <p>实力品牌，轻松开店</p>
                                    <object>
                                        <a href="javascript:void(0);">关注</a>
                                    </object>
                                </div>
                            </a>
                            <em>蜀帅麻辣香锅</em>
                        </li>
                        <li>
                            <a href="javascript:void(0);" target="_blank"
                               :style="bg11">
                                <div class="popup">
                                    <img src="./images/pop09.png" alt="">
                                    <p>灶掌柜家常现炒</p>
                                    <p>行业先锋品牌</p>
                                    <p>四季生意，整店输出</p>
                                    <object>
                                        <a href="javascript:void(0);">关注</a>
                                    </object>
                                </div>
                            </a>
                            <em>灶掌柜家常小炒</em>
                        </li>
                        <li>
                            <a href="javascript:void(0);" target="_blank"
                               :style="bg12">
                                <div class="popup">
                                    <img src="./images/pop08.png" alt="">
                                    <p>馋瘾辣骨饭</p>
                                    <p>行业先锋品牌</p>
                                    <p>四季生意，整店输出</p>
                                    <object>
                                        <a href="javascript:void(0);">关注</a>
                                    </object>
                                </div>
                            </a>
                            <em>馋瘾辣骨饭</em>
                        </li>
                    </ul>
                </div>

            </main>
        </div>

        <foot></foot>
    </div>
</template>

<script>

    import Swiper from "swiper"
    import tabNav from "@/components/tabBar/tabBar"
    import foot from "@/components/foot/foot"

    export default {
        name: "Brand",
        data() {
            return {
                bg1: {
                    backgroundImage: "url(" + require("./images/b01.jpg") + ")",
                },
                bg2: {
                    backgroundImage: "url(" + require("./images/b02.jpg") + ")",
                },
                bg3: {
                    backgroundImage: "url(" + require("./images/b03.jpg") + ")",
                },
                bg4: {
                    backgroundImage: "url(" + require("./images/b04.jpg") + ")",
                },
                bg5: {
                    backgroundImage: "url(" + require("./images/b05.jpg") + ")",
                },
                bg6: {
                    backgroundImage: "url(" + require("./images/b06.jpg") + ")",
                },
                bg7: {
                    backgroundImage: "url(" + require("./images/b07.jpg") + ")",
                },
                bg8: {
                    backgroundImage: "url(" + require("./images/b08.jpg") + ")",
                },
                bg9: {
                    backgroundImage: "url(" + require("./images/b09.jpg") + ")",
                },
                bg10: {
                    backgroundImage: "url(" + require("./images/b10.jpg") + ")",
                },
                bg11: {
                    backgroundImage: "url(" + require("./images/b11.jpg") + ")",
                },
                bg12: {
                    backgroundImage: "url(" + require("./images/b12.jpg") + ")",
                }
            }
        },
        methods: {
            // 模拟循环添加背景图片
            loopBg() {
                // this.data = this.data.concat("1",1)
                // this.$set(this.stu, "sex", "男")
                // console.log(this.stu)
                this.stu.age = 1;
                this.stu.name = "小明"
            },
            brandLbtInit() {
                new Swiper('.swiper-container', {
                    loop: true, // 循环模式选项

                    // // 如果需要分页器
                    // pagination: {
                    //     el: '.swiper-pagination',
                    // },
                    //
                    // // 如果需要前进后退按钮
                    // navigation: {
                    //     nextEl: '.swiper-button-next',
                    //     prevEl: '.swiper-button-prev',
                    // },
                })
            }
        },
        mounted() {
            this.brandLbtInit()
        },
        created() {
            this.loopBg()
        },
        components: {
            tabNav,
            foot
        }
    }
</script>

<style lang="less">

    @import "../../../node_modules/swiper/dist/css/swiper.min.css";

    #brand {
        /*

    精选品牌


*/
        /* 上部三格子 */

        body {
            //background: linear-gradient(top,#fff0db,#fef8ee)!important;
            background: -webkit-linear-gradient(top, #fff0db, #fef8ee) !important; /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(top, #fff0db, #fef8ee) !important; /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(top, #fff0db, #fef8ee) !important; /* Firefox 3.6 - 15 */
            background: linear-gradient(top, #fff0db, #fef8ee) !important; /* 标准的语法 */
        }

        footer {
            background-color: #eaeaea !important;
        }

        nav {
            //margin-top: 10px;
            height: 310px;
            background-color: #fff;


            .nav-content {
                height: 100%;
                display: flex;
                justify-content: space-between;
                padding-top: 41px;

                .nav-left {
                    flex: 0 0 151px;
                    height: 100%;
                    border: 1px solid #eaeaea;

                    .mid-title {
                        padding-top: 12px;

                        p {
                            text-align: center;

                            &:nth-of-type(1) {
                                font-size: 18px;
                                color: #333;
                                font-weight: bold;
                                line-height: 18px;
                                margin-bottom: 2px;
                            }

                            &:nth-of-type(2) {
                                font-size: 10px;
                                color: #c1c1c1;
                                line-height: 10px;
                            }
                        }

                        .mid-nav {
                            text-align: center;
                            padding-left: 15px;
                            padding-right: 15px;
                            margin-top: 10px;

                            li {
                                height: 35px;
                                border-bottom: 1px solid #eaeaea;
                                line-height: 35px;
                                cursor: pointer;
                                transition: transform 0.1s;
                                text-align: left;
                                padding-left: 5px;

                                &:hover {
                                    transform: translateX(-5px);
                                }

                                span {
                                    &:nth-of-type(1) {
                                        margin-right: 3px;
                                        background: url("./images/slid_04.png") no-repeat center center;
                                        background-size: contain;
                                    }

                                }

                                span {
                                    &:nth-of-type(1) {
                                        display: inline-block;
                                        font-style: normal;
                                        width: 15px;
                                        height: 15px;
                                        font-size: 12px;
                                        color: #fff;
                                        line-height: 15px;
                                        text-align: center;
                                    }

                                    &:nth-of-type(2) {
                                        font-size: 14px;
                                    }

                                    &:nth-of-type(3) {
                                        display: inline-block;
                                        vertical-align: text-top;
                                        width: 13px;
                                        height: 15px;
                                    }
                                }

                                &:nth-of-type(1) {
                                    span {
                                        &:nth-of-type(1) {

                                            background: url("./images/slid_01.png") no-repeat center center;
                                            background-size: contain;

                                        }


                                        &:nth-of-type(3) {

                                            background: url("./images/hot_01.png") no-repeat center center;
                                            background-size: contain;
                                        }
                                    }
                                }

                                &:nth-of-type(2) {
                                    span {
                                        &:nth-of-type(1) {

                                            background: url("./images/slid_02.png") no-repeat center center;
                                            background-size: contain;

                                        }


                                        &:nth-of-type(3) {

                                            background: url("./images/hot_02.png") no-repeat center center;
                                            background-size: contain;
                                        }
                                    }
                                }

                                &:nth-of-type(3) {
                                    span {
                                        &:nth-of-type(1) {

                                            background: url("./images/slid_03.png") no-repeat center center;
                                            background-size: contain;

                                        }


                                        &:nth-of-type(3) {

                                            background: url("./images/hot_03.png") no-repeat center center;
                                            background-size: contain;
                                        }
                                    }
                                }

                                &:last-child {
                                    border-bottom: none;
                                }
                            }
                        }
                    }
                }

                .nav-mid {
                    flex: 0 0 838px;
                    height: 100%;
                    background-color: #ccc;

                    .swiper-container {
                        width: 838px;

                        a {
                            width: 100%;
                            height: 100%;
                            display: block;

                            img {

                                width: 100%;
                                display: block;
                            }
                        }

                        /* 轮播点的样式设置 */

                        .swiper-pagination-bullet {
                            background-color: #fff;
                            opacity: 1;

                            &.swiper-pagination-bullet-active {
                                width: 25px;
                                border-radius: 4px;
                            }
                        }

                        .swiper-button-prev,
                        .swiper-button-next {
                            width: 30px !important;
                            height: 30px !important;
                            background-color: rgba(0, 0, 0, .2) !important;
                            border-radius: 50%;
                            background-size: 7px 44px;
                        }
                    }
                }

                .nav-right {
                    flex: 0 0 184px;
                    height: 100%;
                    background-color: #ffad46;

                    a {
                        display: block;
                        width: 100%;
                        height: 100%;
                        background-color: #ccc;

                        img {
                            display: block;
                            width: 100%;
                        }
                    }
                }
            }
        }

        /* 主体 */

        main {
            background-color: #fff;
            padding-top: 40px;
            padding-bottom: 72px;
            /* 标题 */

            .brand-title {
                height: 32px;
                background: url("./images/title_img.png") no-repeat center center;
                background-size: contain;
                margin-bottom: 40px;
            }

            /* 品牌盒子 */

            .brand-box {
                .bb-nav {
                    display: flex;
                    justify-content: space-between;
                    flex-flow: row wrap;

                    li {
                        flex: 0 0 278px;
                        height: 435px;
                        //background-color: pink;
                        margin-bottom: 75px;
                        position: relative;
                        cursor: pointer;

                        background-color: #ccc;
                        overflow: hidden;

                        > div {
                            width: 278px;
                            height: 395px;
                            overflow: hidden;
                        }

                        > a {
                            display: block;
                            width: 278px;
                            height: 395px;
                            background-size: contain;

                            .popup {
                                width: 224px;
                                height: 294px;
                                background-color: rgba(255, 255, 255, .9);
                                border-radius: 10px;
                                position: absolute;
                                //top: 63px;
                                left: 50%;
                                transform: translateX(-50%);
                                top: 274px;
                                transition: top .4s ease-out .1s, background-color .4s ease-in-out .1s, box-shadow 0.4s ease-in-out .1s;
                                text-align: center;
                                padding: 50px 0;

                                img {
                                    vertical-align: middle;
                                    margin-bottom: 25px;
                                }

                                p {
                                    &:nth-of-type(1) {
                                        font-size: 20px;
                                        margin-bottom: 24px;
                                    }

                                    &:nth-of-type(2) {
                                        font-size: 14px;
                                        line-height: 17px;
                                    }

                                    &:nth-of-type(3) {
                                        font-size: 14px;
                                        line-height: 17px;
                                    }
                                }

                                input[type="button"] {
                                    cursor: pointer;
                                    margin-top: 37px;
                                    border: none;
                                    width: 98px;
                                    height: 25px;
                                    background-color: #fe2929;
                                    border-radius: 12px;
                                    line-height: 25px;
                                    color: #fff;
                                    font-size: 14px;
                                    font-family: PingFangSC-;
                                }

                                object {
                                    a {
                                        display: block;
                                        width: 98px;
                                        height: 25px;
                                        background-color: #fe2929;
                                        border-radius: 12px;
                                        border: solid 1px #ff0000;
                                        font-size: 14px;
                                        color: #fff;
                                        margin: 27px auto;
                                        line-height: 24px;
                                    }
                                }
                            }
                        }

                        &:hover {
                            //  &::after {
                            //    content: "";
                            //    position: absolute;
                            //    left: 0;
                            //    right: 0;
                            //    top: 0;
                            //    bottom: 0;
                            //    width: 278px;
                            //    height: 395px;
                            //    background: rgba(255, 255, 255, 0.3);
                            //  }
                            a {
                                .popup {
                                    top: 63px !important;
                                    background-color: #fff !important;
                                    box-shadow: -7px -2px 9px 1px rgba(144, 11, 11, 0.28);
                                }
                            }
                        }
                    }
                }

                em {
                    display: block;
                    text-align: center;
                    width: 100%;
                    position: relative;
                    z-index: 333;
                    background-color: #fff;
                    height: 40px;
                    font-size: 24px;
                    line-height: 45px;
                }
            }
        }

    }
</style>
